<div class="layui-card-body" style="height: 500px;">
    <div id="slideTest1" style="padding:20px;"></div>
    <div style="margin:0 auto;width:500px;height:400px;text-align: center">
        <div>
            <div class="isview div1">
                <img src="https://cdn.weibuyun.com/static/admin/home/images/warning.png"
                     style="height:220px;padding: 10px;">
                <h3><a href="/home/news/info?id=21" target="_blank" class="reding">同意《微步唐山科技有限公司用户使用协议》</a></h3>
            </div>
            <div class="isview div2" style="display: none">
                <form class="layui-form" action="">
                    <select name="product_run_id" lay-verify="required" style="text-align: left;"
                            lay-filter="product_run_id">
                        <option value=0>创建新产品</option>
                        <volist name="buyorder" id="item">
                            <option value={$item.id}>{$item.info}</option>
                        </volist>
                    </select>
                    <input type="hidden" name="product_info_id" value="$info.product_info_id">
                </form>
                <div class="buyorder">
                    <h3>选择服务包使用方式后将不能更改,请正确选择</h3>
                </div>
            </div>
            <div class="layui-row isview div3" style="display: none">
                <div class="layui-col-md6">
                    <img src="" width="200px;" height="200px;" id="wxcode">
                </div>
                <div class="layui-col-md6 ">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>信息</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>产品名称</td>
                            <td>{$info.product_title}</td>

                        </tr>
                        <tr>
                            <td>服务包价格</td>
                            <td>{$info.price}</td>

                        </tr>
                        <tr>
                            <td>服务天数</td>
                            <td>{$info.day}</td>
                        </tr>
                        <tr>
                            <td>服务包说明</td>
                            <td>{$info.title}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="buyorder">
                    <h3>请使用微信扫码进行支付</h3>
                    <h3>支付完成后再进行下一步</h3>
                    <h3>支付成功后订单才会正确生成</h3>
                </div>

            </div>
            <div class="isview div4" style="display: none">
                <div class="buyorder">
                    <h3>微信扫码支付结果:<span id="order_msg"></span></h3>
                </div>
            </div>
            <div class="isview div5" style="display: none">
                <div class="buyorder">
                    <h3>服务包购买情况:<span id="product_msg"></span></h3>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="layui-btn layui-btn-fluid" id="next_btn">已经理解清楚，进行下一步</button>
</div>
<style>
    .layui-anim-upbit {
        text-align: left;
    }
</style>
<script type="text/javascript">
    layui.use(['element', 'form', 'layer', 'slider'], function () {
        var form = layui.form
            , slider = layui.slider
            , $ = layui.$
            , element = layui.element
            , laydate = layui.laydate;
        var status = 1;
        var product_info_id = '{$info.id}';
        var product_run_id = '';
        var order_no = '';
        form.on('select(product_info_id)', function (data) {
            console.log(data.value);
            product_run_id = data.value;
        });

        $('#next_btn').click(function () {
            switch (status) {
                case 1:

                    break;
                case 2:

                    //提交到远程产生定单
                    $.ajax({
                        url: "{:url('/home/wxpay/qrcode')}",
                        type: 'post',
                        dataType: 'json',
                        data: {
                            product_info_id: product_info_id,
                            product_run_id: product_run_id
                        }
                    })
                        .done(function (res) {
                            if (res.code == 1) {
                                $('#wxcode').attr('src', res.msg);
                                order_no = res.data;
                            } else if (res.code == 0) {
                                layer.alert(res.msg, {
                                    closeBtn: 0
                                    , anim: 3 //动画类型
                                });
                                //取得二维码赋值

                            } else {
                                layer.msg('服务器错误', {
                                    time: 1500,
                                    icon: 5
                                });

                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常,请稍后再试', {
                                time: 1500,
                                icon: 5
                            });
                        })
                        .always(function () {

                        });

                    break;
                case 3:
                    //进行远程判断支付成功吗
                    $.ajax({
                        url: "{:url('/home/wxpay/order_status')}",
                        type: 'post',
                        dataType: 'json',
                        data: {
                            order_no: order_no,
                        }
                    })
                        .done(function (res) {
                            if (res.code == 1) {
                                $('#order_msg').html(res.msg);
                                $('#product_msg').html(res.data);
                            } else if (res.code == 0) {
                                layer.alert(res.msg, {
                                    closeBtn: 0
                                    , anim: 3 //动画类型
                                });
                                $('#order_msg').html(res.msg);
                                status--;
                                //取得二维码赋值
                                return false;
                            } else {
                                layer.msg('服务器错误', {
                                    time: 1500,
                                    icon: 5
                                });
                                return false;
                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常,请稍后再试', {
                                time: 1500,
                                icon: 5
                            });
                            return false;
                        })
                        .always(function () {
                            return false;
                        });
                    break;
                case 4:

                    break;
                case 5:
                    layer.alert('产品服务包采购完成，到产品处理进行管理', {
                        closeBtn: 0
                        , anim: 1 //动画类型
                    });
                    $('#next_btn').addClass('layui-btn-disabled')
                    status++;
                    return false
                    break;
                case 6:
                    return false
                    break;
                default:
                    return false;
            }
            status++;
            slstatus.setValue(status)
            $(".isview").hide();
            $('.div' + status).show();

        });


        var slstatus = slider.render({
            elem: '#slideTest1'  //绑定元
            , theme: "#1E9FFF"
            , min: 0
            , max: 5
            , value: 1
            , showstep: true
            , disabled: true

        });


    });

</script>






